<script setup>
import { onMounted, reactive, ref } from 'vue'
import moment from 'moment'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute();
const router = useRouter();
const ruleForm = reactive({
    file: "",
    id:0,
    name: '',
    href: '',
    date: '',
    desc: '',
    image: '',
})
const ruleFormRef = ref()
const rules = reactive({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    href: [
        { required: true, message: '请输入链接', trigger: 'blur' }
    ],
    date: [
        {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change',
        },
    ],

    desc: [
        { required: true, message: '请输入描述', trigger: 'blur' },
    ],
})

onMounted(() => {
    // 进入页面时判断是否是点击编辑跳转过来的
    console.log(route)
    if (route.query.advertId) {
        ruleForm.name = route.query.advertName;
        ruleForm.href = route.query.advertUrl;
        ruleForm.desc = route.query.advertDesc;
        ruleForm.date = route.query.advertDate;
        ruleForm.image = route.query.advertImage;
        ruleForm.id = route.query.advertId;
    }
})
const submitForm = async (formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            const formdata = new FormData()
            var url = "http://124.71.66.63:9090/advert/addAdvert";
            
            formdata.append('uploadFile', ruleForm.file)
            if (route.query.advertId) {
                formdata.append('Advert_id',ruleForm.id);
                formdata.append('Advert_image',ruleForm.image);
                url="http://124.71.66.63:9090/advert/updateAdvert";
            }
            
            formdata.append('Advert_name', ruleForm.name)
            formdata.append('Advert_url', ruleForm.href)
            formdata.append('Advert_date', new Date(moment(ruleForm.date).format('YYYY-MM-DD'))),
            formdata.append('Advert_desc', ruleForm.desc)

            axios.post(url, formdata, { headers: { "Content-Type": "application/x-www-form-urlencoded" } })
                .then(res => {
                    console.log('发布', res);
                    if (res.data.isSuccess == true) {
                        
                    ElMessage({
                        message: res.data.data,
                        type: 'success',
                    })
                    router.push("/advertlist")
                    }
                    else {
                        ElMessage({
                            message: res.data.errorMsg,
                            type: "error"
                        })
                    }

                    
                })
        }
        else {
            console.log('error submit!', fields)
        }
    })
}

const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}

const chooseImage = (file) => {
    console.log(file);
    if (file) {
        ruleForm.file = file.raw
    }
}
</script>
<template>
    <div class="list">轮播图列表

        <div class="form-box">
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto"
                class="demo-ruleForm" status-icon>
                <el-form-item>
                    <el-upload class="upload-demo" :on-change="chooseImage" drag :auto-upload="false">
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            拖拽到此处 <em>或点击上传</em>
                        </div>
                        <template #tip>
                            <div class="el-upload__tip">

                            </div>
                        </template>
                    </el-upload>
                </el-form-item>

                <el-form-item label="名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>

                <el-form-item label="链接" prop="href">
                    <el-input v-model="ruleForm.href" />
                </el-form-item>

                <el-form-item label="时间" required>
                    <el-form-item prop="date">
                        <el-date-picker v-model="ruleForm.date" type="date" aria-label="时间" placeholder="开始"
                            style="width: 100%" />
                    </el-form-item>
                </el-form-item>

                <el-form-item label="描述" prop="desc">
                    <el-input v-model="ruleForm.desc" type="textarea" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm(ruleFormRef)">
                        发布
                    </el-button>
                    <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>